<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
const asyncRoutes = [
  {
    path: "/permission",
    redirect: "/permission/page",
    alwaysShow: true, // will always show the root menu
    name: "Permission",
    meta: {
      title: "权限",
      icon: "lock",
      roles: ["admin"] // you can set roles in root nav
    },
    children: [
      {
        path: "page",
        name: "PagePermission",
        meta: {
          title: "页面权限",
          roles: ["admin"] // or you can only set roles in sub nav
        }
      },
      {
        path: "directive",
        name: "DirectivePermission",
        meta: {
          title: "指令权限"
          // if do not set roles, means: this page does not require permission
        }
      },
      {
        path: "role",
        name: "RolePermission",
        meta: {
          title: "角色权限",
          roles: ["admin"]
        }
      }
    ]
  },

  {
    path: "/icon",
    children: [
      {
        path: "index",
        name: "Icons",
        meta: { title: "Icons", icon: "icon", noCache: true }
      }
    ]
  },

  {
    path: "/example",
    redirect: "/example/list",
    name: "Example",
    meta: {
      title: "Example",
      icon: "el-icon-s-help",
    },
    children: [
      {
        path: "create",
        name: "CreateArticle",
        meta: { title: "Create Article", icon: "edit" }
      },
      {
        path: "edit/:id(\\d+)",
        name: "EditArticle",
        meta: {
          title: "Edit Article",
          noCache: true,
          activeMenu: "/example/list"
        },
        hidden: true
      },
      {
        path: "list",
        name: "ArticleList",
        meta: { title: "Article List", icon: "list" }
      }
    ]
  },

  {
    path: "/tab",
    children: [
      {
        path: "index",
        name: "Tab",
        meta: { title: "Tab", icon: "tab" }
      }
    ]
  },

  {
    path: "/error",
    redirect: "noRedirect",
    name: "ErrorPages",
    meta: {
      title: "Error Pages",
      icon: "404"
    },
    children: [
      {
        path: "401",
        name: "Page401",
        meta: { title: "401", noCache: true }
      },
      {
        path: "404",
        name: "Page404",
        meta: { title: "404", noCache: true }
      }
    ]
  },

  {
    path: "/error-log",
    children: [
      {
        path: "log",
        name: "ErrorLog",
        meta: { title: "Error Log", icon: "bug" }
      }
    ]
  },

  {
    path: "/excel",
    redirect: "/excel/export-excel",
    name: "Excel",
    meta: {
      title: "Excel",
      icon: "excel"
    },
    children: [
      {
        path: "export-excel",
        name: "ExportExcel",
        meta: { title: "Export Excel" }
      },
      {
        path: "export-selected-excel",
        name: "SelectExcel",
        meta: { title: "Export Selected" }
      },
      {
        path: "export-merge-header",
        name: "MergeHeader",
        meta: { title: "Merge Header" }
      },
      {
        path: "upload-excel",
        name: "UploadExcel",
        meta: { title: "Upload Excel" }
      }
    ]
  },

  {
    path: "/zip",
    redirect: "/zip/download",
    alwaysShow: true,
    name: "Zip",
    meta: { title: "Zip", icon: "zip" },
    children: [
      {
        path: "download",
        name: "ExportZip",
        meta: { title: "Export Zip" }
      }
    ]
  },

  {
    path: "/pdf",
    redirect: "/pdf/index",
    children: [
      {
        path: "index",
        name: "PDF",
        meta: { title: "PDF", icon: "pdf" }
      }
    ]
  },
  {
    path: "/pdf/download",
    hidden: true
  },

  {
    path: "/theme",
    children: [
      {
        path: "index",
        name: "Theme",
        meta: { title: "Theme", icon: "theme" }
      }
    ]
  },

  {
    path: "/clipboard",
    children: [
      {
        path: "index",
        name: "ClipboardDemo",
        meta: { title: "Clipboard", icon: "clipboard" }
      }
    ]
  },

  {
    path: "external-link",
    children: [
      {
        path: "https://github.com/PanJiaChen/vue-element-admin",
        meta: { title: "External Link", icon: "link" }
      }
    ]
  },

  // 404 page must be placed at the end !!!
  { path: "*", redirect: "/404", hidden: true }
];

function hasPermission(roles, route) {   //  roles---->admin   editor
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}

console.log(filterAsyncRoutes(asyncRoutes,['editor']))
</script>
</body>
</html>

<!-- 
1 服务端直接返回菜单数组（包含一级 二级菜单）
2 把所有的菜单都写好，然后根据服务端返回字段，来显示对应权限的菜单 -->